<template>
  <view class="links-page">
    <!-- 顶部导航栏 -->
    <view class="header-nav">
      <view class="nav-content">
        <text class="nav-title">商家页面导航</text>
        <view class="nav-actions">
          <text class="iconfont-v2 icon-gengduo action-icon"></text>
        </view>
      </view>
    </view>

    <!-- 页面链接列表 -->
    <view class="links-container">
      <view class="section-title">商家功能页面</view>
      
      <view class="link-item" @click="navigateTo('/pages/bussiness/job-list')">
        <view class="link-icon">
          <text class="iconfont-v2 icon-zhiwei"></text>
        </view>
        <view class="link-content">
          <text class="link-title">职位列表</text>
          <text class="link-desc">管理发布的职位信息</text>
        </view>
        <text class="iconfont-v2 icon-arrow-right link-arrow"></text>
      </view>

      <view class="link-item" @click="navigateTo('/pages/bussiness/message')">
        <view class="link-icon">
          <text class="iconfont-v2 icon-xiaoxi"></text>
        </view>
        <view class="link-content">
          <text class="link-title">消息中心</text>
          <text class="link-desc">查看和管理消息</text>
        </view>
        <text class="iconfont-v2 icon-arrow-right link-arrow"></text>
      </view>

      <view class="link-item" @click="navigateTo('/pages/bussiness/profile')">
        <view class="link-icon">
          <text class="iconfont-v2 icon-wode"></text>
        </view>
        <view class="link-content">
          <text class="link-title">我的</text>
          <text class="link-desc">个人信息和设置</text>
        </view>
        <text class="iconfont-v2 icon-arrow-right link-arrow"></text>
      </view>

      <view class="link-item" @click="navigateTo('/pages/bussiness/job-order')">
        <view class="link-icon">
          <text class="iconfont-v2 icon-dingdan"></text>
        </view>
        <view class="link-content">
          <text class="link-title">我的订单</text>
          <text class="link-desc">查看和管理订单</text>
        </view>
        <text class="iconfont-v2 icon-arrow-right link-arrow"></text>
      </view>

      <view class="link-item" @click="navigateTo('/pages/bussiness/job-refresh')">
        <view class="link-icon">
          <text class="iconfont-v2 icon-shuaxin"></text>
        </view>
        <view class="link-content">
          <text class="link-title">职位刷新</text>
          <text class="link-desc">购买职位刷新服务</text>
        </view>
        <text class="iconfont-v2 icon-arrow-right link-arrow"></text>
      </view>

      <view class="link-item" @click="navigateTo('/pages/bussiness/job-invite')">
        <view class="link-icon">
          <text class="iconfont-v2 icon-yaoqing"></text>
        </view>
        <view class="link-content">
          <text class="link-title">职位邀约</text>
          <text class="link-desc">购买主动邀约服务</text>
        </view>
        <text class="iconfont-v2 icon-arrow-right link-arrow"></text>
      </view>

      <view class="link-item" @click="navigateTo('/pages/bussiness/job-publish')">
        <view class="link-icon">
          <text class="iconfont-v2 icon-fabu"></text>
        </view>
        <view class="link-content">
          <text class="link-title">发布职位</text>
          <text class="link-desc">编辑和发布职位信息</text>
        </view>
        <text class="iconfont-v2 icon-arrow-right link-arrow"></text>
      </view>

      <view class="link-item" @click="navigateTo('/pages/bussiness/job-publish-new')">
        <view class="link-icon">
          <text class="iconfont-v2 icon-fabu"></text>
        </view>
        <view class="link-content">
          <text class="link-title">发布职位(新)</text>
          <text class="link-desc">选择职位类型和位置权限</text>
        </view>
        <text class="iconfont-v2 icon-arrow-right link-arrow"></text>
      </view>

      <view class="link-item" @click="navigateTo('/pages/bussiness/job-category')">
        <view class="link-icon">
          <text class="iconfont-v2 icon-fenlei"></text>
        </view>
        <view class="link-content">
          <text class="link-title">职位分类</text>
          <text class="link-desc">选择职位分类和具体职位</text>
        </view>
        <text class="iconfont-v2 icon-arrow-right link-arrow"></text>
      </view>

      <view class="section-title">相关功能页面</view>
      
      <view class="link-item" @click="navigateTo('/pages/fast/company')">
        <view class="link-icon">
          <text class="iconfont-v2 icon-gongsi"></text>
        </view>
        <view class="link-content">
          <text class="link-title">公司信息</text>
          <text class="link-desc">查看公司详情</text>
        </view>
        <text class="iconfont-v2 icon-arrow-right link-arrow"></text>
      </view>

      <view class="link-item" @click="navigateTo('/pages/fast/job-detail')">
        <view class="link-icon">
          <text class="iconfont-v2 icon-zhiwei-xiangqing"></text>
        </view>
        <view class="link-content">
          <text class="link-title">职位详情</text>
          <text class="link-desc">查看职位详细信息</text>
        </view>
        <text class="iconfont-v2 icon-arrow-right link-arrow"></text>
      </view>

      <view class="link-item" @click="navigateTo('/pages/fast/links')">
        <view class="link-icon">
          <text class="iconfont-v2 icon-lianjie"></text>
        </view>
        <view class="link-content">
          <text class="link-title">快速页面导航</text>
          <text class="link-desc">所有快速页面的链接</text>
        </view>
        <text class="iconfont-v2 icon-arrow-right link-arrow"></text>
      </view>

      <view class="section-title">其他功能</view>
      
      <view class="link-item" @click="navigateTo('/pages/fast/index')">
        <view class="link-icon">
          <text class="iconfont-v2 icon-shouye"></text>
        </view>
        <view class="link-content">
          <text class="link-title">首页</text>
          <text class="link-desc">返回应用首页</text>
        </view>
        <text class="iconfont-v2 icon-arrow-right link-arrow"></text>
      </view>

      <view class="link-item" @click="navigateTo('/pages/fast/register')">
        <view class="link-icon">
          <text class="iconfont-v2 icon-zhuce"></text>
        </view>
        <view class="link-content">
          <text class="link-title">注册页面</text>
          <text class="link-desc">用户注册功能</text>
        </view>
        <text class="iconfont-v2 icon-arrow-right link-arrow"></text>
      </view>

      <view class="link-item" @click="navigateTo('/pages/fast/login')">
        <view class="link-icon">
          <text class="iconfont-v2 icon-denglu"></text>
        </view>
        <view class="link-content">
          <text class="link-title">登录页面</text>
          <text class="link-desc">用户登录功能</text>
        </view>
        <text class="iconfont-v2 icon-arrow-right link-arrow"></text>
      </view>
    </view>

    <!-- 底部信息 -->
    <view class="footer-info">
      <text class="footer-text">商家管理系统 - 页面导航</text>
      <text class="footer-version">版本 1.0.0</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 页面数据
    }
  },
  methods: {
    navigateTo(url) {
      uni.navigateTo({
        url: url,
        fail: (err) => {
          console.log('导航失败:', err);
          uni.showToast({
            title: '页面不存在',
            icon: 'none'
          });
        }
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.links-page {
  min-height: 100vh;
  background: #f5f5f5;
}

/* 顶部导航栏 */
.header-nav {
  background: #ED6567;
  padding: 20rpx 30rpx;
  padding-top: calc(20rpx + env(safe-area-inset-top));
  
  .nav-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    .nav-title {
      font-size: 36rpx;
      font-weight: 600;
      color: white;
    }
    
    .nav-actions {
      .action-icon {
        font-size: 32rpx;
        color: white;
      }
    }
  }
}

/* 链接容器 */
.links-container {
  padding: 30rpx;
  
  .section-title {
    font-size: 32rpx;
    font-weight: 600;
    color: #333;
    margin: 40rpx 0 20rpx 0;
    padding-left: 20rpx;
    border-left: 8rpx solid #ED6567;
    
    &:first-child {
      margin-top: 0;
    }
  }
  
  .link-item {
    background: white;
    border-radius: 24rpx;
    padding: 30rpx;
    margin-bottom: 20rpx;
    display: flex;
    align-items: center;
    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
    cursor: pointer;
    transition: all 0.3s ease;
    
    &:hover {
      transform: translateY(-4rpx);
      box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.12);
    }
    
    &:last-child {
      margin-bottom: 0;
    }
    
    .link-icon {
      width: 80rpx;
      height: 80rpx;
      background: linear-gradient(135deg, #ED6567 0%, #D55A54 100%);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 24rpx;
      flex-shrink: 0;
      
      .iconfont-v2 {
        font-size: 32rpx;
        color: white;
      }
    }
    
    .link-content {
      flex: 1;
      min-width: 0;
      
      .link-title {
        display: block;
        font-size: 32rpx;
        font-weight: 600;
        color: #333;
        margin-bottom: 8rpx;
      }
      
      .link-desc {
        font-size: 26rpx;
        color: #666;
        line-height: 1.4;
      }
    }
    
    .link-arrow {
      font-size: 24rpx;
      color: #ccc;
      margin-left: 16rpx;
      flex-shrink: 0;
    }
  }
}

/* 底部信息 */
.footer-info {
  padding: 40rpx 30rpx;
  text-align: center;
  background: white;
  margin-top: 40rpx;
  
  .footer-text {
    display: block;
    font-size: 28rpx;
    color: #666;
    margin-bottom: 8rpx;
  }
  
  .footer-version {
    font-size: 24rpx;
    color: #999;
  }
}

/* 响应式适配 */
@media (max-width: 750rpx) {
  .links-container {
    padding: 24rpx;
    
    .link-item {
      padding: 24rpx;
      
      .link-icon {
        width: 64rpx;
        height: 64rpx;
        
        .iconfont-v2 {
          font-size: 28rpx;
        }
      }
      
      .link-content {
        .link-title {
          font-size: 28rpx;
        }
        
        .link-desc {
          font-size: 24rpx;
        }
      }
    }
  }
}
</style>
